<template>
	<view class="share-wrap">
		<uni-nav-bar left-icon="back" left-text="返回" right-text="" statusBar="true" title="分享" backgroundColor="#6E609E"
		 @clickLeft="back" color="#FCF9F9"></uni-nav-bar>

		<view style="width: 100%; height: 713px;">
			<image style="width: 100%; height: 100%;" :src="src" mode=""></image>
		</view>

		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<view class="action-btn-group">
				<button type="primary" class="action-btn no-border save-now-btn" @tap="saveImgToLocal">保存图片</button>
			</view>
			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border buy-now-btn" @tap="popup">分享图片</button>
			</view>
		</view>

		<!--底部分享弹窗-->
		<tui-bottom-popup :show="popupShow" @close="popup">
			<view class="tui-share">
				<view class="tui-share-title">分享到</view>

				<scroll-view scroll-x class="tui-mt">
					<view class="tui-share-top">
						<view class="tui-share-item" :class="[shareList[0].share.length-1 === index?'tui-item-last':'']" v-for="(item,index) in shareList[0].share":key="index" @tap="forward(index)">
							<view class="tui-share-icon" hover-class="tui-hover" :hover-stay-time="150">
								<tui-icon :name="item.icon" :color="item.color" :size="item.size?item.size:36"></tui-icon>
							</view>
							<view class="tui-share-text">{{item.name}}</view>
						</view>
						<view class="tui-empty">!</view>
					</view>
				</scroll-view>

			</view>
		</tui-bottom-popup>
		<!--底部分享弹窗-->
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import share from '@/components/share';
	import hchPoster from '@/components/hch-poster/hch-poster.vue'
	export default {
		components: {
			uniNavBar,
			share,
			hchPoster
		},
		data() {
			return {
				deliveryFlag: false,
				canvasFlag: true,
				posterData: {},
				header: "",
				userId: "",
				src: "",
				popupShow: false, //底部分享
				shareList: [
					{
						share: [
							{
								name: "微信",
								icon: "wechat",
								color: "#80D640"
							},
							{
								name: "朋友圈",
								icon: "moments",
								color: "#80D640",
								size: 32
							},
						]
					}, 
				],
				openSettingBtnHidden: true, //是否授权
				ewmImg: "", //这是要保存的图片
				brief:"",
				name:"",
			}
		},
		onLoad(options) {
			this.userId = options.id
			this.tui.request("/app/goods/getSharePic/" + this.userId, 'GET', {}, false, false, false, ).then(res => {
				if (res.errno == 0) {
					this.src = res.data.url
					this.ewmImg = res.data.url
					this.brief = res.data.brief
					this.name = res.data.name
				}
			})
		},
		methods: {
			// 转发弹框
			popup() {
				this.popupShow = !this.popupShow
			},
			// 转发朋友圈
			forward(index) {
				let that = this
				console.log(index)
				uni.getProvider({
					service: "payment",
					success: (res) => {
						console.log(res)
					},
					fail: (e) => {
						console.log("获取支付通道失败：", e);
					}
				});

				if (index == 0) {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						href: "http://app.maotuoxianzi.com/qianyanH5/#/pages/product/product?id=" + this.userId,
						title: that.name,
						summary: that.brief,
						imageUrl: that.ewmImg,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else {
					uni.share({
						provider: "weixin",
						scene: "WXSenceTimeline",
						type: 0,
						href: "http://app.maotuoxianzi.com/qianyanH5/#/pages/product/product?id=" + this.userId,
						title: that.name,
						summary: that.brief,
						imageUrl: that.ewmImg,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}

			},
			saveEwm: function(e) {
				//获取相册授权
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									//这里是用户同意授权后的回调
									this.saveImgToLocal();
								},
								fail() { //这里是用户拒绝授权后的回调
									this.openSettingBtnHidden = false
								}
							})
						} else { //用户已经授权过了
							this.saveImgToLocal();
						}
					}
				})
			},
			// 保存
			saveImgToLocal: function(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定保存到相册吗',
					success: function(res) {
						console.log(res)
						console.log(that.ewmImg)
						if (res.confirm) {
							uni.downloadFile({
								url: that.ewmImg, //图片地址
								success: (res) => {
									if (res.statusCode === 200) {
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath,
											success: function() {
												uni.showToast({
													title: "保存成功",
													icon: "none"
												});
											},
											fail: function() {
												uni.showToast({
													title: "保存失败",
													icon: "none"
												});
											}
										});
									}
								}
							})


						} else if (res.cancel) {

						}
					}
				});
			},
			//返回
			back() {
				uni.navigateBack()
			},
			createCanvasImageEvn() {
				// 这个是固定写死的小程序码
				Object.assign(this.posterData, {
					url: 'https://img0.zuipin.cn/mp_zuipin/poster/hch-pro.jpg', //商品主图
					icon: 'https://img0.zuipin.cn/mp_zuipin/poster/hch-hyj.png', //醉品价图标
					title: "天然铂金香水面膜一盒(5片装)美白 补水养肤 让肌肤喝饱水", //标题
					discountPrice: "19.90", //折后价格
					orignPrice: "99.90", //原价
					code: 'https://img0.zuipin.cn/mp_zuipin/poster/hch-code.png', //小程序码
					// closeUrl: "https://img0.zuipin.cn/mp_zuipin/poster/close_btn.png" //关闭按钮
				})
				this.$forceUpdate(); //强制渲染数据
				setTimeout(() => {
					this.canvasFlag = false; //显示canvas海报
					this.$refs.hchPoster.createCanvasImage(); //调用子组件的方法
				}, 500)

			},

			// 保存到系统相册
			saveCanvasImage() {
				console.log("点击了保存")
				wx.showLoading({
					title: "保存中..."
				})
				let _this = this
				// 1-把画布转化成临时文件
				uni.canvasToTempFilePath({
					x: 50,
					y: 40,
					width: this.phoneW - 100, // 画布的宽
					height: this.phoneH - 120, // 画布的高
					destWidth: (this.phoneW - 100) * 5,
					destHeight: (this.phoneH - 120) * 5,
					canvasId: "myCanvas",
					success(res) {
						// 2-保存图片至相册
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res2) {
								wx.hideLoading()
								uni.showToast({
									title: "图片保存成功",
									duration: 2000,
									icon: "none"
								})
								_this.canvasCancelEvn()
							},
							fail() {
								uni.showToast({
									title: "保存失败，稍后再试",
									duration: 2000,
									icon: "none"
								})
								wx.hideLoading()
							}
						})
					},
					fail() {
						uni.showToast({
							title: "保存失败，稍后再试",
							duration: 2000,
							icon: "none"
						})
						wx.hideLoading()
					}
				})
			},


			//分享
			share() {
				this.$refs.share.toggleMask();
			},
		}
	}
</script>

<style lang="scss">
	.uni-nav-bar-text {
		font-size: 34upx !important;
		font-weight: bold;
	}

	.canvas {
		position: fixed !important;
		// top: 0 !important;
		left: 0 !important;
		display: block !important;
		width: 100%;
		height: 100% !important;
		z-index: 10;
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		left: 0upx;
		bottom: 0upx;
		z-index: 95;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 106upx;
		box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3);

		.action-btn-group {
			width: 50%;
			height: 106upx;
			line-height: 106upx;
			font-weight: 500;
			text-align: center;
			border-radius: 0;
			overflow: hidden;

			.action-btn {
				height: 106upx;
				line-height: 106upx;
				font-size: 38upx;
				background: #6E609E;
				border-radius: 0;
			}

			.save-now-btn {
				height: 106upx;
				line-height: 106upx;
				background: #fff;
				font-size: 38upx;
				color: #333232;
				border-radius: 0;
			}
		}
	}

	/*转发*/
	.tui-share {
		background: #e8e8e8;
		position: relative;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-share-title {
		font-size: 26rpx;
		color: #7E7E7E;
		text-align: center;
		line-height: 26rpx;
		padding: 20rpx 0 50rpx 0;
	}

	.tui-share-top,
	.tui-share-bottom {
		min-width: 100%;
		padding: 0 20rpx 0 30rpx;
		white-space: nowrap;
	}

	.tui-mt {
		margin-top: 30rpx;
		padding-bottom: 300rpx;
	}

	.tui-share-item {
		width: 126rpx;
		display: inline-block;
		margin-right: 24rpx;
		text-align: center;
	}

	.tui-item-last {
		margin: 0;
	}

	.tui-empty {
		display: inline-block;
		width: 30rpx;
		visibility: hidden;
	}

	.tui-share-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fafafa;
		height: 126rpx;
		width: 126rpx;
		border-radius: 32rpx;
	}

	.tui-share-text {
		font-size: 24rpx;
		color: #7E7E7E;
		line-height: 24rpx;
		padding: 20rpx 0;
		white-space: nowrap;
	}

	.tui-btn-cancle {
		width: 100%;
		height: 100rpx;
		position: absolute;
		left: 0;
		bottom: 0;
		background: #f6f6f6;
		font-size: 36rpx;
		color: #3e3e3e;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-hover {
		background: rgba(0, 0, 0, 0.2)
	}
</style>
